使用 v-for 動態產生選項
如果我們今天要將陣列的資料放進 select 單選下拉式選單中，可以在 option 標籤中使用 v-for，將 item 帶入到選項中，記得要在 value 前面加上 : ，因為 value 的值是隨著陣列的內容而不同是一種動態的屬性，最後我們使用 v-model 將 select 和資料 selected 綁定，當我們點擊選項後，選項的 value 就會變成 selected 的值。
1
2
3
4
5
6
7
8
| <body>
<div class="app">
<select v-model="select">
<option disabled>請選擇</option>
<option v-for="item in dataArray" :value="item">{{item}}</option>
</select>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
dataArray:['Leo','Perter','Harry'],
selected:''
}
});
</script>
|
替換 checkbox 值
先前我們有提到，若將 checkbox 綁定在資料上，當我們點擊 checkbox 欄位，此時綁定的資料會出現 true 或者 false，如果我們想要將 true 或 false 替換成自己想要的值，可以使用 true-value ＝'我們設定的值'，false-value ＝'我們設定的值'，比如果們將 true 設定成男生，false 設定成女生，之後點擊 checkbox 後，checkbox 綁定的資料 gender 就會呈現男生或女生。
1
2
3
4
5
| <body>
<div class="app">
<input type="checkbox" v-model='checkbox' true-value='男生' false-value='女生'>{{gender}}
</div>
</body>
|
1
2
3
4
5
6
7
8
9
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
gender:'男生',
}
});
</script>
|
v-model.lazy
先前我們提到，如果我們使用 v-model 將 input 輸入還有資料 text 綁定，此時當我們在 input 輸入欄位內輸入值，{{text}} 畫面沒有馬上跟著改變，而是等到當我們輸入結束，跳出輸入框時，畫面才跟著變動，原因就在於我們在 v-model 加上 lazy，來達成這個效果。
1
2
3
4
5
| <body>
<div class="app">
<input type="text" v-model.lazy='text'> {{text}}
</div>
</body>
|
1
2
3
4
5
6
7
8
9
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
text:''
}
});
</script>
|
v-model.number
如果我們使用 typeof 查看 input 綁定的資料 text，可以發現它是字串的形式，如果我們想要將字串的形式改成數字，可以再 v-model 後面加上 .number，此時我們會發現 text 的 typeof 變成是 number。
1
2
3
4
5
| <body>
<div class="app">
<input type="text" v-model.number='text'> {{typeof(text)}}{{text}}
</div>
</body>
|
1
2
3
4
5
6
7
8
9
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
text:''
}
});
</script>
|
v-model.trim
如果我們要 input 輸入欄位的開頭字尾的空白給刪除，可以再 v-model 後面加上 .trim，此時就算我們在輸入欄位的開頭還是結尾加上空白鍵，最後在畫面呈現時都會省略。
1
2
3
4
5
| <body>
<div class="app">
<input type="text" v-model.trim='text'>{{text}}
</div>
</body>
|
1
2
3
4
5
6
7
8
9
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
text:''
}
});
</script>
|